<template>
  <div class="color-picker">
    <div class="colorBox" ref="colorBox">
      <svg class="pointer" ref="pointer" style=" background-color: yellow;">
      </svg>
      <div class="top1"  @click="selClick"></div>
      <div class="curColor" ref="curColor"></div>
      <div class="blackDept" ref="blackDept" @click="bckClick"></div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      color: {r:0,g:0,b:0,a:1},
      colorWithBlack:{r:0,g:0,b:0,a:1}
    }
  },
  watch:{
    color(){
      let color = this.color;
      this.$refs.blackDept.style.background = `linear-gradient(to bottom, rgba(${color.r},${color.g},${color.b},${Math.round(color.a*100)/100}) 0%,rgb(0,0,0))`;
    },
    colorWithBlack(){
      let color = this.colorWithBlack;
      this.$refs.curColor.style.backgroundColor = `rgba(${color.r},${color.g},${color.b},${color.a})`
    }
  },
  mounted(){
    this.color = this.getRGB(0,0);
    this.colorWithBlack = this.getBlack(0);
  },
  methods:{
    selClick(event){
      let rect = event.currentTarget.getBoundingClientRect();
      let x = event.clientX - Math.round(rect.left);
      // 获取鼠标在当前元素内的y坐标
      let y = event.clientY - Math.round(rect.top);
      this.$refs.pointer.style.left = x + "px";
      this.$refs.pointer.style.top = y + "px";

      //RGB__
      let color = this.getRGB(x/200,y/200);
      this.color = color;
      this.colorWithBlack = this.getBlack(0);
    },
    bckClick(event){
      let rect = event.currentTarget.getBoundingClientRect();
      let x = event.clientX - Math.round(rect.left);
            // 获取鼠标在当前元素内的y坐标
      let y = event.clientY - Math.round(rect.top);
      let blackcolor = this.getBlack(y/200);
      this.colorWithBlack = blackcolor;
    },
    getRGB(x,y){
      let r = 0, g = 0, b = 0;
      if (x < 1 / 6) {
        r = 255;
        g = 255 * x * 6;
        b = 0;
      } else if (x < 2 / 6) {
        r = 255 * (2 / 6 - x)*6;
        g = 255;
        b = 0 ;
      } else if (x < 3 / 6) {
        r = 0;
        g = 255;
        b = 255 * (x - 2/6)*6;
      } else if (x < 4 / 6) {
        r = 0;
        g = 255 * (4 / 6 - x)*6;
        b = 255;
      } else if (x < 5 / 6) {
        r = 255 * (x - 4 / 6)*6;
        g = 0;
        b = 255;
      } else {
        r = 255;
        g = 0;
        b = 255 * (1 - x)*6;
      }
      r = Math.round(Math.min(255,r+255*y));
      g = Math.round(Math.min(255,g+255*y));
      b = Math.round(Math.min(255,b+255*y));
      return {r,g,b,a:1}
    },
    getBlack(y){
      let rate = (1-y);
      this.colorWithBlack.r = Math.round( rate * this.color.r );
      this.colorWithBlack.g = Math.round( rate * this.color.g );
      this.colorWithBlack.b = Math.round( rate * this.color.b );
      return {
        r:rate * this.color.r,
        g:rate * this.color.g,
        b:rate * this.color.b,
        a:1
      };
    },
    getColor(){
      return this.colorWithBlack;
    }
    
  }
}
</script>

<style>
    .color-picker{
      position: relative;
      margin: 0px;
      padding: 0px;
      height: 200px;
      width: 200px;
    }
    .colorBox{
      display: block;
      height: 200px;
      width: 200px;
      background: linear-gradient(
                    to right, rgba(255
                    , 0, 0, 1) 0%,
                    #ff0 17%, #0f0 33%,
                    #0ff 50%, #00f 67%,
                    #f0f 83%, #f00 100%);
      position: relative;
      outline: 0.1px solid black;
    }
    .pointer{
      position: absolute;
      left: -10px;
      top: -10px;
      display: block;
      height: 5px;
      width: 5px;
      background: white;
      border: black solid 1px;
      transform: translate(-50%, -50%);
    }
    .top1{
      height: 200px;
      width: 200px;
        background: linear-gradient(
                    to top, rgb(255, 255, 255) 0%,rgba(255, 255, 255, 0));
        position: relative;
    }
    .curColor{
      display: block;
      background: rebeccapurple;
      height: 200px;
      width: 20px;
      position: absolute;
      left: 205px;
      top: 0px;
      z-index: 100;
      outline: 0.1px solid black;
    }
    .blackDept{
      display: block;
      background: linear-gradient(to bottom, rgba(0,255,240,0.95) 0%,rgba(0,0,0,0.95));
      height: 200px;
      width: 20px;
      position: absolute;
      left: 230px;
      top: 0px;
      z-index: 100;
      outline: 0.1px solid black;
    }
</style>